<template>
	<view class="has-bg-white">
		<view class="banner-container">
		  <swiper :style="{width: '100vw', height: '550rpx'}" 
		    :indicator-dots="indicatorDots" 
		    :indicator-color="indicatorColor" 
		    :indicator-active-color="indicatorActiveColor"
		    :autoplay="autoplay" 
		    :interval="interval" 
		    :duration="duration" 
		    :circular="circular"
		    :previous-margin="previousMargin"
		    :next-margin="nextMargin"
		    @change="swiperChange" >
		    <swiper-item v-for="(bannerItem, bannerIndex) in bannerList" :key="bannerIndex">
		      <!-- 效果实现关键点，在于class名为image-container的元素的style中justify-content与padding的值，该值在currentIndex为0和最后一张图的时候，与其他位置的值不太一样，需要自行设定 -->
		      <!-- padding值需要自己根据设计稿计算 -->
		      <view class="image-container"
		        :style="{
		          justifyContent: currentIndex===0?((bannerIndex===bannerList.length-1)?'flex-end':(bannerIndex===1?'flex-start':'center')):(currentIndex===bannerList.length-1?(bannerIndex===0?'flex-start':(bannerIndex===bannerList.length-2?'flex-end':'center')):(bannerIndex===currentIndex-1?'flex-end':(bannerIndex===currentIndex+1?'flex-start':'center'))), 
		          padding: currentIndex===0?((bannerIndex===bannerList.length-1)?'56rpx 26rpx 0 0':(bannerIndex===1?'56rpx 0 0 26rpx':'56rpx 0 0 0')):(currentIndex===bannerList.length-1?(bannerIndex===0?'56rpx 0 0 26rpx':(bannerIndex===bannerList.length-2?'56rpx 26rpx 0 0':'56rpx 0 0 0')):(bannerIndex===currentIndex-1?'56rpx 26rpx 0 0':(bannerIndex===currentIndex+1?'56rpx 0 0 26rpx':'56rpx 0 0 0')))
		        }">
		        <!-- 正在展示的图片放大一定倍数 -->
		        <image class="slide-image" 
		          :src="bannerItem.ma_url" 
		          :style="{
		            transform: currentIndex===bannerIndex?'scale(' + scaleX + ',' + scaleY + ')':'scale(1,1)'
		          }" 
		          @click="getBannerDetail(bannerItem.id,bannerItem.ma_type)" />
					<view class="textbox has-pd-10">
						<image :src="bannerItem.ma_ico" mode=""></image>
						{{bannerItem.ma_name}}
						<view v-show="bannerItem.ma_moren == 1" class="mobox">
							<uni-icons class="is-txt-inline" type="circle-filled" color="#F30C2C" size="24"></uni-icons>
						</view>
					</view>
		      </view>
		    </swiper-item>
		  </swiper>
			
		</view>
		<view class="has-bg-white has-badge-border">
			<view class="has-pd-10">
				<view class="is-size-18 has-pdtb-10">
					设置说明
				</view>
				<view class="is-size-14 has-pdtb-5">
					1.请先上传自己的收款码
				</view>
				<view class="is-size-14 has-pdtb-5">
					2.接单前如未设置默认收款码则会提示并跳转到此页面
				</view>
				<view class="is-size-14 has-pdtb-5">
					3.设置方法：左右滑动收款码，点击它即可
				</view>
				<view class="is-size-14 has-pdtb-5">
					4.提示设置默认成功后会自动转向接单平台
				</view>
			</view>
		</view>
	</view>
  
</template>
<script>
var _self;
import uniIcons from "@/components/uni-icons/uni-icons.vue";
export default {
  components: {uniIcons},
  data () {
    return {
	  foxtoken:'',
      indicatorDots: false,
      indicatorColor: 'rgba(255, 255, 255, .4)',
      indicatorActiveColor: 'rgba(255, 255, 255, 1)',
      autoplay: false,
      interval: 3000,
      duration: 300,
      circular: true,
      previousMargin: '100rpx', // 前一张图片的外边距
      nextMargin: '100rpx', // 后一张图片的外边距
      currentIndex: 0,
      scaleX: 1.5,
      scaleY: 1.5,
      // 图片数组，需要至少3张图
      bannerList: []
    }
  },
  onLoad() {
	_self = this;
  	this.getList();
  },
  methods: {
    swiperChange (e) {
      this.currentIndex = e.mp.detail.current
      this.scaleX = 1.5
      this.scaleY = 1.5
    },
    getBannerDetail (index,type) {
		let info = this.service.getfox();
		let user_token = info[0]['foxtoken'];
		// console.log(user_tel)
		uni.request({
			url: this.service.FOX_URL + 'diamond/set_code_moren',
			method:'POST',
			data: {
				user_key: user_token,
				id:index
			},
			dataType:'json',
			header:{
				'content-type':'application/x-www-form-urlencoded',
			},
			success: res => {
				var rest = res.data;
				// console.log(rest)
				if(rest.status == 'success'){
					this.getList();
					uni.showToast({
						title:rest.msg,
						icon:'none',
					})
					uni.setStorageSync('matype', type);
					setTimeout(function() {
					    uni.navigateTo({
					    	url:'/pages/index/orderline'
					    })
					}, 1500)
				}else{
					uni.showToast({
						title:rest.msg,
						icon:'none',
					})
				}
			}
		})
    },
	getList(){
		let info = this.service.getfox();
		if(info[0]){
			let user_token = info[0]['foxtoken'];
			this.foxtoken = user_token;
			// console.log(user_tel)
			uni.request({
				url: this.service.FOX_URL + 'diamond/get_code',
				method:'POST',
				data: {
					user_key: user_token
				},
				dataType:'json',
				header:{
					'content-type':'application/x-www-form-urlencoded',
				},
				success: res => {
					var rest = res.data;
					// console.log(rest)
					if(rest.code == '200'){
						if(rest.data.list){
							this.bannerList = rest.data.list;
						}else{
							uni.showToast({
								title:rest.message,
								icon:'none',
								mask:true
							})
						}
					}else{
						uni.showToast({
							title:rest.message,
							icon:'none',
							mask:true
						})
						setTimeout(function() {
							uni.redirectTo({
								url:'/pages/allcode/allcode'
							})
						}, 15000)
					}
				}
			})
		}else{
			uni.reLaunch({
				url:'../logon/login'
			})
		}
	}
  }
}
</script>

<style scoped>
.banner-container {
  width: 100vw;
  height: 624rpx;
  background: #FFFFFF;
}
.image-container {
  margin-top: 80upx;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
}
.slide-image {
  width: 550rpx;
  height: 328rpx;
  z-index: 200;
  border-radius: 30rpx;
  transition-duration: .3s;
  transition-timing-function: 'ease';
}
.textbox{
	position: absolute;
	bottom: 10rpx;
	z-index: 999;
	background: rgba(255,255,0,0.8);
	border-radius: 10upx;
	color: #179B16;
	width:90%;
}
.textbox image{width:40upx;height: 40upx;vertical-align: middle;margin-right: 12upx;}
.mobox{float: right;}
</style>